<template>
        <mian-layout style="background:#fff">
          <div class="afbox">
            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <div class="editLabel">商铺基础资料</div>
                <div style="padding-left:70px">
                    <el-form-item label="店铺名称" prop="shopName">
                      <el-input v-model="ruleForm.shopName" placeholder="店铺名称" style="width: 400px;" :disabled="onlyLook==1"/>
                    </el-form-item>

                    <el-form-item label="店铺指数" prop="indexStar">
                      <div style="padding:7px 0 0 0">
                        <el-rate v-model="ruleForm.indexStar" :allow-half="true" show-score></el-rate>
                      </div>
                    </el-form-item>

                    <el-form-item label="店铺简介" prop="introduction">
                      <el-input v-model="ruleForm.introduction" type="textarea" placeholder="店铺简介" :autosize="{ minRows: 6, maxRows: 10}" style="width: 400px;" :disabled="onlyLook==1"/>
                    </el-form-item>

                    <el-form-item label="商家名称" prop="businessName">
                      <el-input v-model="ruleForm.businessName" placeholder="商家名称" style="width: 400px;" :disabled="onlyLook==1"/>
                    </el-form-item>

                    <el-form-item label="关联地标" prop="arLandmarkIds">
                      <landmark-select v-if="!id || details" :type="2" v-model="ruleForm.arLandmarkIds" :defaultTxt="defaultTxt" width='400px'/>
                    </el-form-item>

                    <el-form-item label="店铺头图" prop="headImageUrl">
                      <div class="upfileTips" style="display:flex">
                        <upload-file :limit="1" v-if="!id || details" v-model="ruleForm.headImageUrl" type="img"/>
                        <p>请上传1张店铺头图，建议为店铺的品牌LOGO，支持GPG、GEPG、GIF、PNG等<br/>图片文件格式，大小在2M以内</p>
                      </div>
                    </el-form-item>

                    <el-form-item label="授权证照" prop="credentialsImageUrls">
                      <div class="upfileTips" style="display:flex">
                        <upload-file :limit="5" v-if="!id || details" v-model="ruleForm.credentialsImageUrls" type="img"/>
                        <p>请上传最多5张授权证照，建议为店铺的品牌授权、营业执照等图片，<br/>支持GPG、GEPG、GIF、PNG等图片文件格式，大小在2M以内</p>
                      </div>
                    </el-form-item>

                    <el-form-item label="收款币种" prop="">
                        <el-checkbox-group v-model="chooseCurrency">
                          <el-checkbox label="ETH"></el-checkbox>
                          <el-checkbox label="USDT"></el-checkbox>
                          <el-checkbox label="CXT"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="交易服务费率" prop="serviceRate">
                      <el-input v-model="ruleForm.serviceRate" placeholder="交易服务费率" style="width: 148px;"/> %
                    </el-form-item>
                </div>
                <div class="editLabel">商铺物流配置</div>
                <div style="padding-left:70px">

                    <el-form-item label="物流方式" prop="shopName">
                      <el-checkbox v-model="songhuo" label="送货" border size="medium"></el-checkbox>
                      <el-checkbox v-model="ziti" label="自提" border size="medium"></el-checkbox>
                    </el-form-item>

                    <div class="subItemBox" v-if="songhuo">
                      <div class="bg">
                         <h5>送货配置</h5>
                          <el-form-item label="配送时间设置" prop="deliveryDeliveryTime">
                              <el-radio-group v-model="ruleForm.deliveryDeliveryTime">
                                <el-radio :label="1">工作日</el-radio>
                                <el-radio :label="2">工作日+节假日（含双休日）</el-radio>
                              </el-radio-group>
                          </el-form-item>
                          <el-form-item label="设置物流费用" prop="deliveryExpenses">
                              <el-radio-group v-model="ruleForm.deliveryExpenses">
                                <el-radio :label="1">免费包邮</el-radio>
                                <el-radio :label="2">按区域收费</el-radio>
                              </el-radio-group>
                          </el-form-item>

                          <template v-if="ruleForm.deliveryExpenses==2">
                            <el-form-item label="">
                                <el-button type="success" size="mini" icon="el-icon-plus" @click="addshAddress()">添加送货支持的地点</el-button>
                            </el-form-item>
                            <el-form-item label="">
                              <div class="mglkbox" v-for="(dt,index) in outDeliveryPlaces" :key="index">
                                <Address v-if="!id || details" class="areaBox2" v-model="dt.area" :startLevel="2" :endLevel="3" width="auto"/>
                                <div class="mglkbox-item">
                                    <el-input v-model="dt.logisticsAmount" placeholder="物流费用"/>
                                </div>
                                <div class="mglkbox-item" style="margin-left:-8px">$</div>
                                <div class="mglkbox-item">
                                    <el-button icon="el-icon-minus" @click="addshAddress(index)"></el-button>
                                </div>
                              </div>
                              <!-- {{ruleForm.deliveryPlaces}} -->
                            </el-form-item>
                          </template>
                      </div>
                    </div>

                    <div class="subItemBox" v-if="ziti">
                      <div class="bg">
                        <h5>自提配置</h5>
                        <el-form-item label="配送时间设置">
                            <el-time-picker
                              is-range
                              v-model="psTime"
                              range-separator="至"
                              start-placeholder="开始时间"
                              end-placeholder="结束时间"
                              value-format="HH:mm:ss"
                              placeholder="选择时间范围">
                            </el-time-picker>
                          </el-form-item>
                        <el-form-item label="">
                              <el-button type="success" size="mini" icon="el-icon-plus" @click="addSelf()">添加自提点</el-button>
                          </el-form-item>
                        <el-form-item v-for="(dt,i) in ruleForm.selfDeliverys" :key="i" :label="`自提点${i+1}`">
                          <div class="mglkbox">
                              <div class="mglkbox-item">
                                  <el-input v-model="dt.address" placeholder="地址"/>
                              </div>
                              <div class="mglkbox-item">
                                  <el-input v-model="dt.phone" placeholder="联系方式"/>
                              </div>
                              <div class="mglkbox-item">
                                  <el-button icon="el-icon-minus" @click="addSelf(i)"></el-button>
                              </div>
                          </div>
                        </el-form-item>
                        <!-- {{ruleForm.selfDeliverys}} -->
                      </div>
                    </div>
                </div>

                <div style="padding-left:70px">
                  <el-form-item>
                      <el-button type="primary" icon="el-icon-check" :loading="btnLoading" @click="save('ruleForm')">保存</el-button>
                      <my-back icon="el-icon-close">取消</my-back>
                    </el-form-item>
                </div>
            </el-form>
          </div>
        </mian-layout>
        
</template>

<script>
import {mapGetters} from 'vuex'
import {
  add_shop,
  get_shop_details,
  edit_shop
} from '@/api/collext'
import {mergeObject,filterStr} from '@/utils/index'
import myBack from '@/components/public/myBack.vue'
import uploadFile from '@/components/public/uploadFile.vue'
import landmarkSelect from "@/components/public/landmarkSelect.vue";
import Address from '@/components/public/address.vue'
export default {
  name: '',
  components:{
    myBack,
    uploadFile,
    landmarkSelect,
    Address
  },
  data() {
    return {
      ruleForm: {
        shopName:'',
        indexStar:5,
        introduction:'',
        businessName:'',
        arLandmarkIds:[],
        headImageUrl:'',
        credentialsImageUrls:[],
        payCurrency:'',
        serviceRate:'',
        logisticsDeliveryStatus:1, // 送货-标志,1支持，2不支持
        logisticsSelfStatus:1, // 	自提-标志,1支持，2不支持
        deliveryDeliveryTime:2,
        deliveryExpenses:1,
        selfDeliveryEndTime:'',
        selfDeliveryStartTime:'',
        deliveryPlaces:[],
        selfDeliverys:[
          {
            address:'',
            phone:''
          }
        ]
      },
      songhuo:true,
      ziti:true,
      chooseCurrency:[],  // 货币选择
      outDeliveryPlaces:[
          {
            // countryId:'', //国家id
            // countryName:'', // 国家名称
            // cityId:'', // 城市id
            // cityName:'', // 城市名称
            area:'',
            logisticsAmount:'' // 物流费用
          }
      ],
      rules: {},
      defaultTxt:'',
      details:'',
      id:'',
      onlyLook:'',
      dialogVisible:false,
      btnLoading:false,
      psTime:''
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.onlyLook = this.$route.query.onlyLook
    if(this.id){  // 编辑、查看
      const res = await get_shop_details(this.id)
      if(res.success){
        this.details = res.data
        this.ruleForm = mergeObject(this.ruleForm,res.data)
        this.chooseCurrency = res.data.payCurrency.split(',')
        // 自提时间
        this.psTime = [this.ruleForm.selfDeliveryStartTime,this.ruleForm.selfDeliveryEndTime]

        // 处理送货、自提
        if(res.data.logisticsSelfStatus ==2){
          this.ziti = false
        }
        if(res.data.logisticsDeliveryStatus ==2){
          this.songhuo = false
        }

        // 物流配置支持地址处理
        if(res.data.deliveryPlaces && res.data.deliveryPlaces.length>0){
          let arr = []
          for(let i=0;i<res.data.deliveryPlaces.length;i++){
              const item = res.data.deliveryPlaces[i]
              arr.push({
                logisticsAmount:item.logisticsAmount.num,
                area:{
                  countryId:item.countryId, //国家id
                  countryName:item.countryName, // 国家名称
                  cityId:item.cityId, // 城市id
                  cityName:item.cityName, // 城市名称
                }
              })
          }
          this.outDeliveryPlaces = arr
        }
      }
    }
  },
  methods: {
    addshAddress(index){
      if(index || index==0){
        this.outDeliveryPlaces.length>1 && this.outDeliveryPlaces.splice(index,1)
      }else{
        this.outDeliveryPlaces.push({area:'',logisticsAmount:''})
      }
    },
    addSelf(index){
      if(index || index==0){
        this.ruleForm.selfDeliverys.length>1 && this.ruleForm.selfDeliverys.splice(index,1)
      }else{
        this.ruleForm.selfDeliverys.push({address:'',phone:''})
      }
    },
    // 确定
    save(formName) {
      if(!this.ruleForm.shopName){
        return this.$message.warning('请输入店铺名称')
      }else if(!this.ruleForm.introduction){
        return this.$message.warning('请输入店铺简介')
      }else if(!this.ruleForm.businessName){
        return this.$message.warning('请输入商家名称')
      }else if(!this.ruleForm.arLandmarkIds || this.ruleForm.arLandmarkIds.length<1){
        return this.$message.warning('请选择关联的AR地标')
      }else if(!this.ruleForm.headImageUrl){
        return this.$message.warning('请上传店铺头图')
      }else if(!this.ruleForm.credentialsImageUrls || this.ruleForm.credentialsImageUrls.length<1){
        return this.$message.warning('请上传授权证照')
      }else if(!this.chooseCurrency || this.chooseCurrency.length<1){
        return this.$message.warning('请输选择收款币种')
      }else if(!this.ruleForm.serviceRate || this.ruleForm.serviceRate.length<1){
        return this.$message.warning('请输入交易服务费率')
      }else if(!this.songhuo && !this.ziti){
        return this.$message.warning('请选择配送方式')
      }

      this.ruleForm.payCurrency = this.chooseCurrency.join(',')

      // 处理送货地址
      let shdzs = []
      for(let i=0;i<this.outDeliveryPlaces.length;i++){
        const item = this.outDeliveryPlaces[i]
        if((item.logisticsAmount || item.logisticsAmount==0) && item.area.cityName){
          shdzs.push({
            logisticsAmount:item.logisticsAmount.toString(),
            countryId:item.area.countryId, //国家id
            countryName:item.area.countryName, // 国家名称
            cityId:item.area.cityId, // 城市id
            cityName:item.area.cityName, // 城市名称
            //...item.area
          })
        }
      }
      this.ruleForm.deliveryPlaces = shdzs

      //处理自提地址
      let sefls = []
      for(let j=0;j<this.ruleForm.selfDeliverys.length;j++){
        const item = this.ruleForm.selfDeliverys[j]
        if(item.address && item.phone){
          sefls.push(item)
        }
      }
      this.ruleForm.selfDeliverys = sefls

      // 时间
      this.ruleForm.selfDeliveryStartTime = this.psTime[0]
      this.ruleForm.selfDeliveryEndTime = this.psTime[1]


      if(this.ziti){
          this.ruleForm.logisticsSelfStatus = 1
      }else{
        this.ruleForm.logisticsSelfStatus = 2
      }

      if(this.songhuo){
          this.ruleForm.logisticsDeliveryStatus = 1
      }else{
        this.ruleForm.logisticsDeliveryStatus = 2
      }

      
      //this.btnLoading = true
      if(this.id){  // 编辑
          edit_shop({shopId:this.id,...this.ruleForm}).then(res=>{
            if(res.success){
              this.$message.success('修改成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              this.$message.error(res.message)
            }
            this.btnLoading = false
          })
      }else{  //新增
          // 获取u3d地图id
          //this.getAddress()  // 处理地址
          add_shop(this.ruleForm).then(res=>{
            if(res.success){
              this.$message.success('新增成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              this.$message.error(res.message)
            }
            this.btnLoading = false
          })
      }
      
    },
    getAddress(){
        //  处理地址选择
        const adObj = this.$refs.eleAddress.getCheckedNodes()
        if(!adObj) return
        this.ruleForm.provinceCode = adObj.province.code || ''
        this.ruleForm.provinceName = adObj.province.name || ''
        this.ruleForm.cityCode = adObj.city.code || ''
        this.ruleForm.cityName = adObj.city.name || ''
        this.ruleForm.districtCode = adObj.district.code || ''
        this.ruleForm.districtName = adObj.district.name || ''
    },
    clearNoNum(e,prop){
      let o = e.target
      o.value = o.value.replace(/[^\d.]/g,"") //清除"数字"和"."以外的字符
      o.value = o.value.replace(/^\./g,"");//验证第一个字符是数字而不是字符
      o.value = o.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//只保留第一个.清除多余的
      this.ruleForm[prop] = o.value
    }
  }
}
</script>

<style lang="scss" scoped>
  .colFlex{
  display: flex;
  .cfItem{
    flex: 1;
    padding: 0 0 0 10px;
  }
  &+.colFlex{
    margin: 10px 0 0 0;
  }
}
.addBtnBox{
  padding: 10px 0 0 0;
}
.upfileTips{
  display: flex;
  p{
    flex: 1;
    display: flex;
    font-size: 12px;
    color: #999;
    align-items: center; 
    line-height: 24px;
  }
}

 .afbox{
        padding:0 0 0 30px;
        .color999{
            color: #999;
            font-size: 12px;
        }
        .editLabel{
            font-family: SimHei;
            font-weight: 700;
            margin-top: 40px;
            margin-bottom: 30px;
            color: #333;
            font-size: 16px;
            &::before{
                content: '';
                display: block;
                float: left;
                width: 10px;
                height: 10px;
                background: #409eff;
                margin: 5px 15px 0 0;
            }
        }
        .uptubox{
            display: flex;
            
        }
        .zbtime{
            width: 483px;
            display: flex;
            .tmitem{
                flex: 1;
            }
            .label{
                padding: 0 10px 0 0;
                color: #999;
            }
        }
        .subItemBox{
            padding: 0 0 0 140px;
            margin:  0 0 20px 0;
            .bg{
                background: #f8f9fb;
                border-radius:2px ;
                padding: 20px 20px 1px 20px;
            }
            .specsBox{
                padding: 0 0 20px 0;
                &+.specsBox{
                    border-top: 1px dashed #cccaca;
                    padding-top: 20px;
                }
            }
            
        }
        .wxNoticeMsgBox{
            background: #fff;
            width: 600px;
            padding: 15px 15px 1px 0;
        }
        .tsxxBox{
            color: #f05656;
            a{ 
                color: #4433e4;
                text-decoration: underline;
                position: relative;
                z-index: 10;
                &:hover{
                    span{
                        display: block;
                    }
                }
                span{
                    left: 68px;
                    top: 50%;
                    margin: -400px 0 0 0;
                    position: absolute;
                    z-index: 10;
                    width: 500px;
                    display: none;
                    img{
                        display: block;
                        width: 100%;
                    }
                }
            }
        }
        .inlineTips{
            padding: 0 0 0 10px;
            color: #333;
            font-size: 12px;
        }
        .tips{
                color: #999;
                font-size: 14px;
                line-height: 24px;
                padding: 0;
            }
    }
  .mglkbox{
    display: flex;
    margin: 0 0 10px 0;
    .mglkbox-item{
      padding: 0 10px 0 0;
    }
  }
</style>

<style lang="scss">
  .colFlex textarea{
    height: 148px !important;
  }
</style>


